import Vue from 'vue'
import Vuex from 'vuex'
// 按需导入api接口
import { getUserInfoAPI, getUserProfileAPI } from '@/api/userAPI.js'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

// 定义一个初始的，不含任何数据的state对象
// let initState = {
//   tokenInfo: {
//     token: '',
//     refresh_token: ''
//   },
//   userInfo: {},
//   userProfile: {}
// }
// // 从 localStorage 中读取本地数据
// const stateStr = localStorage.getItem('state')
// // console.log(stateStr)
// // 判断stateStr 是否为null
// if (stateStr !== null) {
//   initState = JSON.parse(stateStr)
// }
// initState = stateStr === null ? initState : JSON.parse(stateStr)
export default new Vuex.Store({
  plugins: [createPersistedState()],
  state: {
    tokenInfo: {
      token: '',
      refresh_token: ''
    },
    userInfo: {},
    userProfile: {}
  },
  mutations: {
    // 专门用来修改 tokenInfo 的方法
    // payload的格式为 {token，refresh_token}
    // 组件中调用Mutation方法两种
    // this.$store.commit('方法名',参数)
    // ...mapMutations(['updateTokenInfo'])
    updateTokenInfo (state, payload) {
      state.tokenInfo = payload

      // 把修改过后的state数据源 持久化存储到localStorage
      // localStorage.setItem('state', JSON.stringify(state))
    },
    // 更新用户的基本信息，性惨重的payload就是用户的信息对象
    updateUserInfo (state, payload) {
      state.userInfo = payload
      // localStorage.setItem('state', JSON.stringify(state))
    },
    cleanState (state) {
      // 把关键的数据，都重置为空对象
      state.tokenInfo = {}
      state.userInfo = {}
      state.userProfile = {}
      // 把修改过后的state数据源 持久化存储到localStorage
      // localStorage.setItem('state', JSON.stringify(state))
    },
    updateUserProfile (state, payload) {
      state.userProfile = payload
      // localStorage.setItem('state', JSON.stringify(state))
    }
  },
  actions: {
    async initUserInfo (ctx) {
      const { data: res } = await getUserInfoAPI()
      if (res.message === 'OK') {
        // console.log(res)
        ctx.commit('updateUserInfo', res.data)
      }
    },
    async initUserProfile (ctx) {
      const { data: res } = await getUserProfileAPI()
      if (res.message === 'OK') {
        // console.log(res)
        ctx.commit('updateUserProfile', res.data)
      }
    }
  },
  getters: {
    avatar (state) {
      return state.userInfo.photo || 'https://img.yzcdn.cn/vant/cat.jpeg'
    }
  },
  modules: {
  }
})
